<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        #content{
            padding: 20px;
        }
        table{
            margin-top: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
     <div id="content">
            <form>
                <div class="form-group">
                    <label for="exampleName">姓名：</label>
                    <input type="text" class="form-control" id="exampleName" placeholder="姓名">
                </div>
                <div class="form-group">
                    <label for="exampleTel">电话：</label>
                    <input type="tel" class="form-control" id="exampleTel" placeholder="电话">
                </div>    
                <div class="form-group">
                    <label for="exampleEmail">邮箱：</label>
                    <input type="email" class="form-control" id="exampleEmail" placeholder="邮箱">
                </div>             
                <button type="submit" class="btn btn-default saveBtn">保存</button>
            </form>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <td>姓名</td>
                        <td>电话</td>
                        <td>邮箱</td>
                        <td>功能</td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleNameEdit">姓名：</label>
                    <input type="text" class="form-control" id="exampleNameEdit" placeholder="姓名">
                </div>
                <div class="form-group">
                    <label for="exampleTelEdit">电话：</label>
                    <input type="email" class="form-control" id="exampleTelEdit" placeholder="电话">
                </div>
                <div class="form-group">
                    <label for="exampleEmailEdit">邮箱：</label>
                    <input type="email" class="form-control" id="exampleEmailEdit" placeholder="邮箱">
                </div>
                <button type="submit" class="btn btn-default saveEdit">修改</button>
            </form>

     </div>
     <script>         
         var saveBtn = document.querySelector('.saveBtn');
         var table = document.querySelector('table');
         var tbo = document.querySelector('table tbody');
         var saveEdit = document.querySelector('.saveEdit');
         saveBtn.onclick = function(e){
             e.preventDefault();
             var obj = {};
             obj.name = exampleName.value;
             obj.tel = exampleTel.value;
             obj.email = exampleEmail.value;
            var all = localStorage.getItem('listNew');
            if(all){
                all = JSON.parse(all);
                all.push(obj);
                localStorage.setItem('listNew',JSON.stringify(all));  
            }else{
                localStorage.setItem('listNew',JSON.stringify([obj])); 
            }
            tbo.innerHTML += `
                            <tr>
                                <td>${obj.name}</td>
                                <td>${obj.tel}</td>
                                <td>${obj.email}</td>
                                <td>
                                    <button class="delete">删除</button>
                                    <button class="edit">修改</button>
                                </td>
                            </tr>
                        `
           
         }
         getAll();
         function getAll(){
             var all = localStorage.getItem('listNew');
             var str = '';
             all = JSON.parse(all);
             if(all){
                all.forEach(element => {
                    str += `
                            <tr>
                                    <td>${element.name}</td>
                                    <td>${element.tel}</td>
                                    <td>${element.email}</td>
                                    <td>
                                        <button class="delete">删除</button>
                                        <button class="edit">修改</button>
                                    </td>
                            </tr>
                            `
                });
                tbo.innerHTML += str;

             }
             
         }
         table.addEventListener('click',function(e){
             var event = e || window.event;
             var target = event.target ||event.srcElement;
             if(target.className == 'delete'){
                 var tr = target.parentNode.parentNode;
                 var index = tr.rowIndex-1;
                 tr.remove();
                 var all = localStorage.getItem('listNew');
                 all = JSON.parse(all);
                 all.splice(index,1);
                 localStorage.setItem('listNew',JSON.stringify(all));
             }
         })
         table.addEventListener('click',function(e){
            var event = e || window.event;
            var target = event.target ||event.srcElement;
            if(target.className == 'edit'){
                var tr = target.parentNode.parentNode;
                index = tr.rowIndex-1;
                var all = localStorage.getItem('listNew');
                all = JSON.parse(all);
                console.log(all[index]);
                exampleNameEdit.value = all[index].name;
                exampleTelEdit.value = all[index].tel;
                exampleEmailEdit.value = all[index].email;
            }
         })
         saveEdit.onclick = function(e){
             e.preventDefault();
             var objEdit = {};
            objEdit.name =  exampleNameEdit.value;
            objEdit.tel = exampleTelEdit.value;
            objEdit.email = exampleEmailEdit.value;
            var newNode = document.createElement('tr');
            var str = `
                        <td>${objEdit.name}</td>
                        <td>${objEdit.tel}</td>
                        <td>${objEdit.email}</td>
                        <td>
                            <button class="delete">删除</button>
                            <button class="edit">修改</button>
                        </td>`
            newNode.innerHTML = str;
            var oldNode = tbo.rows[index]
            tbo.replaceChild(newNode,oldNode);
            var all = localStorage.getItem('listNew');
            all = JSON.parse(all);
            all[index] = objEdit;
            console.log(all);
            localStorage.setItem('listNew',JSON.stringify(all));
         }



         
     </script>

</body>
</html>